<template>
  <div>
        <el-col style="margin-bottom:10px;font-size:24px;font-weight:bold;">
            <el-card shadow="never">
                体检套餐管理
            </el-card>
        </el-col>
        <!-- 数据筛选 -->
        <el-card class="box-card"  shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据筛选</span>
            </div>
            <div>
                <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item label="输入查询:" style="margin-right:80px">
                        <el-input placeholder="项目ID或者项目名称" v-model="searchform.idorname"></el-input>
                    </el-form-item>

                    <el-form-item label="适用地区:" style="margin-right:80px">
                      <!-- 省 -->
                    <el-select  placeholder="全部" style="width: 120px;" v-model="searchform.privice" @change="cityq($event)">
                        <el-option 
                        v-for="item in ass" 
                        :key="item.area_id" 
                        :value="item.area_name">
                        </el-option>
                    </el-select>
                    <!-- 市 -->
                    <el-select  placeholder="全部" style="width: 120px;" v-model="searchform.city">
                        <el-option v-for="item in citys" :key="item.area_name" :value="item.area_name">
                          
                        </el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item label="适用机构:" style="margin-right:80px">
                    <el-select  placeholder="全部" v-model="searchform.hospital_id">
                        <el-option v-for="item in hospital" :key="item.hospital_name" :value="item.hospital_name">

                        </el-option>
                    </el-select>
                    </el-form-item>

                    <el-form-item style="margin-left:150px">
                    <el-button type="primary" @click="search()">查询</el-button>
                    <el-button @click="cz()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button type="success" @click="centerDialogVisible = true">添加</el-button>
                <el-button type="danger" @click="pishan()">删除</el-button>
                <el-button type="primary">导入</el-button>
            </div>
        </el-card>
        <div>
          <el-table
            ref="multipleTable"
            :data="arr"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            prop="compose_id"
            label="套餐ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop="compose_name"
            label="套餐名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="oldprice"
            label="原价"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="price"
            label="售价"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="address"
            label="适用地区"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="is_use"
            
            label="是否启用"
            show-overflow-tooltip>
            <el-switch
                v-model="arr.is_use"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-table-column>
            <el-table-column
            prop="privice"
            label="订购数量"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="操作" show-overflow-tooltip>
              <el-button type="success">编辑</el-button>
              <template slot-scope="scope">
              <el-button type="success">编辑</el-button>
              <el-button type="danger" @click.native.prevent="deleteRow(scope.$index,arr)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-footer style="padding-top:15px;background-color: #fff;
        text-align: right;
        padding-right: 200px;">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-footer>
  
      </div>
      <!-- 添加 -->
      <el-dialog
        style="overflow: scroll;"
        title="新增体检套餐"
        :visible.sync="centerDialogVisible"
        height="660px"
        width="70%"
        center>
        <el-tabs type="border-card" style="overflow: scroll;">
          <!-- tab -->
          <el-tab-pane label="基本信息">
            <table width="100%">
              <tr>
                <td width="49%" height="660px" style="margin-right:2%">
                  <div style="height:660px;float:left;width:98%">
              <el-form ref="form" label-width="80px">
                <el-form-item label="套餐名称">
                  <el-input v-model="compose_name">

                  </el-input>
                </el-form-item>
                <el-form-item label="套餐ID">
                  <el-input ></el-input>
                </el-form-item>
                
                <el-form-item label="是否启用">
                  <el-switch v-model="is_use"></el-switch>
                </el-form-item>
                <el-form-item label="标签">
                <el-tag style="margin-right:15px">男性套餐</el-tag>
                <el-tag style="margin-right:15px" type="warning">女性套餐</el-tag>
                <el-tag style="margin-right:15px" type="info">老人套餐</el-tag>
                <el-tag style="margin-right:15px" type="success">入职体检</el-tag>
                </el-form-item>
                
                <el-form-item label="有效时间截止至">
                  <el-input></el-input>
                </el-form-item>
                <el-form-item label="原价">
                  <el-input></el-input>
                </el-form-item>
                <el-form-item label="售价">
                  <el-input v-model="money"></el-input>
                </el-form-item>
              </el-form>
            </div>
            </td>
                <td width="49%" height="660px">
                  <div style="height:100%;height: 660px;float:left;width:98%">
                     <el-form :inline="true" class="demo-form-inline">
                     <el-form-item label="适用地区:" style="margin-right:80px;">
                      <!-- 省 -->
                    <el-select  placeholder="全部" style="width:210px;margin-right:10px" v-model="sheng" @change="cityq($event)">
                        <el-option 
                        v-for="item in ass" 
                        :key="item.area_id" 
                        :value="item.area_name">
                        </el-option>
                    </el-select>
                    <!-- 市 -->
                    <el-select  placeholder="全部" style="width: 210px;" v-model="shi">
                        <el-option v-for="item in citys" :key="item.area_name" :value="item.area_name">

                        </el-option>
                    </el-select>
                    </el-form-item>

                      <el-form-item label="适用机构:" style="margin-right:80px">
                    <el-select  placeholder="全部" v-model="searchform.hospital_id">
                        <el-option v-for="item in hospital" :key="item.hospital_name" :value="item.hospital_name">

                        </el-option>
                    </el-select>
                    </el-form-item>
                    </el-form>

                     <el-transfer
                      
                      filterable
                      filter-placeholder="请输入城市拼音">
                    </el-transfer>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form ref="form" label-width="80px">
                    <el-form-item label="套餐介绍">
                      <el-input type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="使用规则">
                      <el-input type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐组成">
                      <el-input type="textarea"></el-input>
                    </el-form-item>
                  </el-form>
                </td>
              </tr>
            </table>
          </el-tab-pane>
          <el-tab-pane label="套餐组成">
            2
          </el-tab-pane>
          <el-tab-pane label="加项包">
            3
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false,add()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
      data() {
      return {
        searchform:{
          page:1,
          pageSize:5,

        },
        ww:'',
        hospital:'',
        total:0,
        a:'',
        multipleSelection: [],
        ids:[],
        newids:[],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        compose_name:'',
        money:'',
        currentPage1: 1,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        centerDialogVisible: false,
        is_use:true,
        arr:[],
        ass:[],
        citys:[],
        sheng:"",
        shi:"",
        id:"",

        idorname:'',
        privice:'',
        city:'',
        hospital_id:'',
      }
    },
methods: {
  cz(){
    this.searchform.idorname = '';
    this.searchform.privice = '';
    this.searchform.city = '';
    this.aa();
  },
    handleSizeChange(val) {
        // console.log(val);
        this.pageSize = val;
        console.log(this.pageSize);
        this.aa();
    },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page = val;
        this.aa()
    },
    // 单删
    deleteRow(index, rows) {
      const del = rows[index].compose_id;
        this.$axios.get('http://121.42.230.80/api/composedelete',{
          params:{
            compose_id:del,
              }
          }).then(
              res=>{
                  console.log(res);
                  this.aa();
              },
              err=>{
                  console.log(err);
              }
          )
    },
    // 批删
    pishan(){
      for(let i = 0;i<this.ids.length;i++){
        if(this.ids.indexOf(this.ids[i])<0){
          this.newids.push(this.ids[i])
        }
      }
      this.$axios.get('http://121.42.230.80/api/itemdelete',{
              params:{
                item_id:this.ids,
              }
          }).then(
              res=>{
                  console.log(res);
                  if(res.data.code=='00000'){
                    this.aa();
                  }
              },
              err=>{
                  console.log(err);
              }
          )
    },
    // 添加
   add(){
      this.$axios.post('http://121.42.230.80/api/composeadd',{
              headers:{
                  Authorization:sessionStorage.getItem('token')
              },
              "params": {
              "is_use": this.is_use, //是否启用
              "label": [5,6],//适用标签
              "compose_name": this.compose_name,//套餐名字
              "oldprice": "788",//原价
              "price": "488", //现价
              "desc": "耳鼻喉", //套餐介绍
              "items": [1,2], //套餐组成
              "rules": "耳鼻喉专用", //规则
              "privice": 130000, //省
              "city": 130200, //市
              "hospital_id": 1, //医院机构
              "chain_id": [1,2],//医院机构分支机构
              "expiretime": "2022-08-10", //有效期
              "note":"这是注意事项",//套餐组成注意事项
              "thumb":[],//缩略图
              "is_hot":1 //1 推荐套餐 0 不推荐
            }
          }).then(
              res=>{
                  console.log(res);
                  if(res.data.code=='00000'){    
                      this.$message({
                        message: '添加成功',
                        type: 'success'
                      });
                  }
                  this.aa();
                  this.citys = res.data.data;
              },
              err=>{
                  console.log(err);
              }
          )
   },

  //  市
   cityq(aa){
    for(let i in this.ass){
      if(aa==this.ass[i].area_name){
        console.log(this.ass[i].area_id);
        this.id = this.ass[i].area_id;
      }
    }
    this.$axios.get('http://121.42.230.80/api/area',{
              headers:{
                  Authorization:sessionStorage.getItem('token')
              },
              params:{parent_id:this.id}
          }).then(
              res=>{
                  console.log(res);
                  this.citys = res.data.data;
              },
              err=>{
                  console.log(err);
              }
          )
   },
  //  查询
  search(){
    // this.aa();
    this.$axios.get('http://121.42.230.80/api/composelist',{params:this.searchform}
      ).then(
        res=>{
            console.log("asdas",res);
            this.arr = res.data.data;
            this.total = res.data.total;
            // console.log(res.data.total);
        },
        err=>{
            console.log(err);
        }
      )
  },
  // 获取列表
  aa(){
    // console.log(this.searchform);
      this.$axios.get('http://121.42.230.80/api/composelist',{params:this.searchform}
      ).then(
        res=>{
            console.log(res);
            this.arr = res.data.data;
            this.total = res.data.total;
            // console.log(res.data.total);
        },
        err=>{
            console.log(err);
        }
      )
    },
    // 获取省
    bb(){
      this.$axios.get('http://121.42.230.80/api/toparea',{
          headers:{
              Authorization:sessionStorage.getItem('token')
          }
      }).then(
          res=>{
              this.ass = res.data.data;
          },
          err=>{
              console.log(err);
          }
      );
    },

    // 批删
    handleSelectionChange(val) {
      this.multipleSelection = val;
      
      for(let i = 0;i<this.multipleSelection.length;i++){
        this.ids.push(this.multipleSelection[i].item_id)
        console.log(this.ids);
      }
    },
    // 机构
    cc(){
      this.$axios.get('http://121.42.230.80/api/hospital',{
              headers:{
                  Authorization:sessionStorage.getItem('token')
              }
          }).then(
              res=>{
                  console.log(res);
                  this.hospital = res.data.data;
              },
              err=>{
                  console.log(err);
              }
          );
    }
},
    created() {
        this.aa();
        this.bb();
        this.cc();
    },
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    line-height: 60px;
  }
  .bbb{
      float: left;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
  .el-transfer-panel{
    height: 400px;
  }
</style>